<template>

  <div class="container" v-loading="loading">

    <div class=" form">
      <div>
        <h3>欢迎访问东软云医院</h3>
      </div>
      <div>
        <el-input class="input" v-model="username" placeholder="请输入用户名" clearable />

        <!-- <input type="text" placeholder="请输入用户名" v-model="username"> -->
      </div>
      <div>
        <el-input class="input" type="password" v-model="password" show-password placeholder="请输入用密码" />

        <!-- <input type="password" placeholder="请输入密码" v-model="password"> -->
      </div>
      <div>
        <!-- <button @click="login">提交</button> -->

        <el-button type="primary" round @click="login">登录</el-button>

      </div>


    </div>


  </div>

</template>


<script lang="ts" setup name="App">
import { ref } from "vue";
import { useRouter, type Router } from "vue-router";
import axios from "axios";
import { service } from "@/utils/request";

import { usePermission } from '@/store/userPermission'


const permissionStrore = usePermission()

//获取router

const router: Router = useRouter()


const username = ref('admin')
const password = ref('123456')

const loading = ref(false);


function login() {

  loading.value = true;
  let url = '/login/login?userName=' + username.value + "&password=" + password.value
  service.get(url).then(success => {

    if (success) {
      //浏览器内置的  sessionStorage 、LocalStorage
      sessionStorage.setItem('username', username.value)

      //2  router.push('/home')  router.replace('/home')

      //获取用户权限 菜单

      getMenuTreeByUserId();


    } else {
      loading.value = false;
      alert("用户名或者密码不正确")
    }
  }).catch(error => {
    loading.value = false;
  })


}


async function getConstants() {

  //从表中查询的
  const constantsItems: [] = await service.get('/constants_item/getAll');

  permissionStrore.setConstantsItems(constantsItems);
}


//ES 7 的语法
async function getMenuTreeByUserId() {
  // alert("获取身份全新")
  const menuTreeList: [] = await service.get('/user/getMenuTreeByUserId');

  // console.log("menuTreeList", menuTreeList);

  permissionStrore.setMenuTreeList(menuTreeList);


  //获取常数项木
  await getConstants();


  router.replace('/home')


}



</script>


<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: rgb(49, 51, 51);
  display: flex;
  justify-content: center;
  align-items: center;

}

.form {


  width: 400px;
  height: 400px;
  background-color: rgb(209, 205, 201);
  box-shadow: 0 0 50px rgb(8, 228, 125);
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form .input {

  width: 260px;
  height: 60px;
  outline: none;
  margin-top: 20px;
  border-radius: 5px;
  border: solid 0.5px grey;
  font-size: 1.5em;

}


.form button {
  width: 260px;
  height: 50px;
  outline: none;
  border-radius: 3px;
  margin-top: 10px;
}
</style>